Storybook 6からの追加要素や変更点

2020/08/18にStorybook6がリリースされた

背景

5.2から、StoriesOfAPIを使った書き方からCSF(ComponentStoryFormat)の書き方が推奨になった(StoriesOfもしばらくサポートする)

翻訳

storiesOfは、ストーリーを追加するためのStorybookのAPIです。 Storybook 5.2までは、Storybookでストーリーを作成する主な方法でした。 Storybook 5.2では、よりシンプルで移植性の高いComponent Story Formatを導入し、将来のすべてのツールとインフラストラクチャはCSF向けになります。そのため、storiesOf APIからストーリーを移行することをお勧めします。これを行うための自動化ツールも提供します。 ただし、storiesOf APIは非推奨ではありません。当分の間、ほとんどの既存のStorybookはstoriesOf APIを使用するため、当面の間はそれをサポートする予定です

5.2より前(storiesOf)

code:javascript

import { storiesOf } from '@storybook/vue'

import HelloWorld from '../components/HelloWorld.vue'

storiesOf('HelloWorld', module).add(

'helloWorld',

() => ({

components: { HelloWorld },

template: `

<div>

<HelloWorld/>

</div>

`,

})

)

それ以降(CSF)

code:javascript

import HelloWorld from '../components/HelloWorld.vue'

export default {

title: 'Test/HelloTest',

parameters: {

layout: 'centered',

}

}

export const HelloTest = () => ({

components: { HelloWorld },

template: `

<div>

<HelloWorld :msg="msg" />

</div>

`,

})

今回storybook6からは、CSF出ないと使えない大きな機能が追加されたので、より強くCSFの書き方が求められるっぽい

6からの変更点、新機能

変更点

初期ファイルについて

5まであったaddon.js、config.jsが無くなった

main.js preview.jsになった

main.jsにはこれらのことが書ける

stories -ストーリーファイルの場所を書く。

addons -使用するアドオンをここに書く。

webpackFinal -Webpackのカスタム構成。

babel -babelのカスタム構成。

preview.jsにはstorybookで使うGlobalCodeの登録とかができる

Vue.use(VueCompositionApi)など使えば全てのstoryファイルに適用される

新機能

Essentials

storybookの便利なアドオン集が、１つにまとまった物が構築時にデフォルトで入った

Docs

ドキュメントタブで、コンポーネントに設定した詳細が見れるようになる

https://gyazo.com/3a51b4dd153df1b4f7d2a1c3815c7a0a

Controls

コンポーネントのpropsをテキストではなくグラフィカルに変更できる

例

https://storybook.js.org/d73fcc9b4e98d83e15922ff900cdbeef/addon-controls-args-background-color.png

カラーコードのpropsがテキストではなくピッカーになったりする(enumなテキストだとselectboxやradioボタンにできたりする)

Actions

ボタンなどに設定したアクションの呼び出しのログを確認できる

Viewport

WIP

Backgrouds

WIP

Toolbars

WIP

Args

5系で既にあったKnobsアドオンの代わりになる機能っぽい

propsの値変更をStorybook上でできるようになります。

code:javascript

import MyButton from './my-button.vue'

const PrimaryButton = (args, { argTypes }) => ({

props: Object.keys(argTypes),

components: { MyButton },

template: '<my-button v-bind="$props" />',

})

PrimaryButton.args = {

primary: true,

label: 'Button',

}

上のargsというプロパティにpropsのデフォルト値を与えると、それらがargsという項目の初期値になり、その後StorybookのUI上でそれらpropsを操作できるようになります

ちなみにbind関数を使うことで、1つのコンポーネントのpropsの違うパターンのコンポーネントの登録と表示ができる

code:javascript

const Template = (args, { argTypes }) => ({

props: Object.keys(argTypes),

components: { MyButton },

template: '<my-button v-bind="$props" />',

});

const Primary = Template.bind({});

Primary.args = {

primary: true,

label: 'Button',

}

const Secondary = Template.bind({});

Secondary.args = {

...Primary.args,

primary: false,

}

5系から6に上げるマイグレーションガイドはこちら